<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/images/logo.ico?v=5">
    <title>集群管家</title>
    <!-- Bootstrap CSS -->
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="/static/lib/bootstrap5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">-->
    <link rel="stylesheet" href="/static/lib/font-awesome/6.4.0/css/all.min.css">
    <style>
        .sidebar {
            min-height: 100vh;
            background-color: #343a40;
        }
        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.75);
        }
        .sidebar .nav-link:hover {
            color: white;
        }
        .sidebar .nav-link.active {
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
        }
        .main-content {
            padding: 20px;
        }
        .camera-card {
            transition: transform 0.3s;
        }
        .camera-card:hover {
            transform: translateY(-5px);
        }
        .live-feed {
            background-color: #f8f9fa;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 sidebar p-0">
                <div class="p-3 text-white">
                    <h4 onclick="window.location.href='/'" style="cursor: pointer;">集群管家 v{{PROJECT_VERSION}}</h4>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#dashboard" data-bs-toggle="tab">
                            <i class="fas fa-tachometer-alt me-2"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#nodes" data-bs-toggle="tab">
                            <i class="fas fa-circle-nodes me-2"></i>节点管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:f_docs()">
                            <i class="fas fa-tags me-2"></i>使用文档
                        </a>
                    </li>
                    <!--
                    <li class="nav-item">
                        <a class="nav-link" href="#settings" data-bs-toggle="tab">
                            <i class="fas fa-cog me-2"></i>系统设置
                        </a>
                    </li>-->
                </ul>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-10 main-content">
                <div class="tab-content">
                    <!-- 仪表盘 -->
                    <div class="tab-pane fade show active" id="dashboard">
                        <h2 class="mb-4">仪表盘</h2>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="card text-white bg-primary mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">节点数量</h5>
                                        <h2 class="card-text" id="total_node_count">0</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card text-white bg-success mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">正常节点</h5>
                                        <h2 class="card-text" id="online_node_count">0</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card text-white bg-warning mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">异常节点</h5>
                                        <h2 class="card-text" id="offline_node_count">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="live-feed">
                            <h4 class="mb-3">实时监控</h4>
                            <div class="row" id="live-feeds">
                                <!-- 实时监控画面将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>

                    <!-- 节点管理 -->
                    <div class="tab-pane fade" id="nodes">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2>节点管理</h2>
                            <!--
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addXcmsModal">
                                <i class="fas fa-plus me-2"></i>添加节点
                            </button>
                            -->
                        </div>

                        <div class="card mb-4">
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" id="search_name" placeholder="搜索节点...">
                                    </div>
                                    <div class="col-md-2">
                                        <select class="form-select" id="search_state">
                                            <option value="">所有状态</option>
                                            <option value="1">在线</option>
                                            <option value="0">离线</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-outline-secondary" id="searchBtn">搜索</button>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>名称</th>
                                                <th>IP地址</th>
                                                <th>操作系统</th>
                                                <th>设备名称</th>
                                                <th>注册时间</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="xcmsTableBody">
                                            <!-- 节点列表将通过JS动态加载 -->
                                        </tbody>
                                    </table>
                                </div>

                                <nav aria-label="Page navigation">
                                    <ul class="pagination justify-content-center" id="pagination">
                                        <!-- 分页将通过JS动态生成 -->
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="tab-pane fade" id="settings">
                        <h2 class="mb-4">系统设置</h2>
                        <div class="card">
                            <div class="card-body">
                                <form id="systemSettingsForm">
                                    <div class="mb-3">
                                        <label for="systemName" class="form-label">系统名称</label>
                                        <input type="text" class="form-control" id="systemName" value="集群管家">
                                    </div>
                                    <div class="mb-3">
                                        <label for="autoRefresh" class="form-label">自动刷新间隔(秒)</label>
                                        <input type="number" class="form-control" id="autoRefresh" value="30">
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="enableAlerts" checked>
                                        <label class="form-check-label" for="enableAlerts">启用异常警报</label>
                                    </div>
                                    <button type="submit" class="btn btn-primary">保存设置</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加节点模态框 -->
    <div class="modal fade" id="addXcmsModal" tabindex="-1" aria-labelledby="addXcmsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addXcmsModalLabel">添加节点</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addXcmsForm">
                        <div class="mb-3">
                            <label for="cameraName" class="form-label">节点名称</label>
                            <input type="text" class="form-control" id="cameraName" required>
                        </div>
                        <div class="mb-3">
                            <label for="cameraIp" class="form-label">IP地址</label>
                            <input type="text" class="form-control" id="cameraIp" required>
                        </div>
                        <div class="mb-3">
                            <label for="cameraLocation" class="form-label">位置</label>
                            <input type="text" class="form-control" id="cameraLocation" required>
                        </div>
                        <div class="mb-3">
                            <label for="cameraRtsp" class="form-label">RTSP地址</label>
                            <input type="text" class="form-control" id="cameraRtsp">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveXcmsBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑节点模态框 -->
    <div class="modal fade" id="editCameraModal" tabindex="-1" aria-labelledby="editCameraModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editCameraModalLabel">编辑节点</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editCameraForm">
                        <input type="hidden" id="editCameraId">
                        <div class="mb-3">
                            <label for="editCameraName" class="form-label">节点名称</label>
                            <input type="text" class="form-control" id="editCameraName" required>
                        </div>
                        <div class="mb-3">
                            <label for="editCameraIp" class="form-label">IP地址</label>
                            <input type="text" class="form-control" id="editCameraIp" required>
                        </div>
                        <div class="mb-3">
                            <label for="editCameraLocation" class="form-label">位置</label>
                            <input type="text" class="form-control" id="editCameraLocation" required>
                        </div>
                        <div class="mb-3">
                            <label for="editCameraRtsp" class="form-label">RTSP地址</label>
                            <input type="text" class="form-control" id="editCameraRtsp">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="updateXcmsBtn">更新</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>-->
    <script src="/static/lib/bootstrap5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
    <script src="/static/lib/jquery/jquery-3.6.0.min.js"></script>
</body>
<script>
    // 模拟节点数据
    let mXcmsData = [];
    function f_docs() {
        window.open("https://beixiaocai.yuque.com/org-wiki-beixiaocai-vo72oa/xcnvs");
    }
    // 加载节点列表
    function f_getXcmsList() {
        console.log("f_getXcmsList()");

        $.ajax({
               url: '/xcms/list?safe=xcnvsxcnvs&name=&describe=&page=1&page_size=10',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {

               },
               success: function (res) {

                   if(res.code === 1000){
                       mXcmsData = res.data;
                   }
                   // 渲染节点列表
                   f_renderXcmsList(mXcmsData);
                   // 更新仪表盘统计
                   f_updateDashboard();

               }
        });
    }
    // 渲染节点列表
    function f_renderXcmsList(renderXcmsData) {
        let eleTableBody = $('#xcmsTableBody');
        eleTableBody.empty();

        if (renderXcmsData.length === 0) {
            eleTableBody.append('<tr><td colspan="7" class="text-center">没有找到匹配的节点</td></tr>');
        }else{
            renderXcmsData.forEach(xcms => {
                const state_str = xcms.state === 1 ?
                        '<span class="badge bg-success">在线</span>' :
                        '<span class="badge bg-danger">离线</span>';

                //<button class="btn btn-sm btn-outline-primary edit-btn" data-name="${xcms.xcms_name}">
                //    <i class="fas fa-edit"></i>
                //</button>
                //<button class="btn btn-sm btn-outline-danger delete-btn" data-name="${xcms.xcms_name}">
                //    <i class="fas fa-trash"></i>
                //</button>

                const row = `
                    <tr>
                        <td>${xcms.xcms_name}</td>
                        <td>${xcms.xcms_host}</td>
                        <td>${xcms.xcms_systemName}</td>
                        <td>${xcms.xcms_machineNode}</td>
                        <td>${xcms.date}</td>
                        <td>${state_str}</td>
                        <td>


                            <button class="btn btn-sm btn-outline-info view-btn" data-name="${xcms.xcms_name}">
                                <i class="fas fa-eye"></i>
                            </button>
                        </td>
                    </tr>
                `;
                eleTableBody.append(row);
            });
        }

    }

    // 更新仪表盘统计
    function f_updateDashboard() {
        const onlineCount = mXcmsData.filter(c => c.state === 1).length;
        const offlineCount = mXcmsData.filter(c => c.state === 0).length;

        $('#total_node_count').text(onlineCount + offlineCount);
        $('#online_node_count').text(onlineCount);
        $('#offline_node_count').text(offlineCount);

        // 更新实时监控画面
        let liveFeeds = $('#live-feeds');
        liveFeeds.empty();
        mXcmsData.filter(c => c.state === 1).slice(0, 4).forEach(camera => {
            const feed = `
                <div class="col-md-6 mb-3">
                    <div class="card camera-card">
                        <div class="card-header">
                            <h5 class="card-title">${camera.xcms_name}</h5>
                            <small class="text-muted">${camera.xcms_host}</small>
                        </div>
                    </div>
                </div>
            `;
            liveFeeds.append(feed);
        });

    }

    $(document).ready(function() {
        // 初始化页面
        f_getXcmsList();
    });


    // 保存节点
    $('#saveXcmsBtn').click(function () {
        const newCamera = {
            id: mXcmsData.length + 1,
            name: $('#cameraName').val(),
            ip: $('#cameraIp').val(),
            location: $('#cameraLocation').val(),
            rtsp: $('#cameraRtsp').val(),
            state: 0
        };

        //mXcmsData.push(newCamera);
        //f_getXcmsList();

        $('#addXcmsModal').modal('hide');
        //$('#addXcmsForm')[0].reset();
    });

    // 编辑节点
    $(document).on('click', '.edit-btn', function () {
        const xcms_name = $(this).data('name');
        const xcms = mXcmsData.find(c => c.xcms_name === xcms_name);

        /*
        $('#editCameraId').val(camera.id);
        $('#editCameraName').val(camera.name);
        $('#editCameraIp').val(camera.ip);
        $('#editCameraLocation').val(camera.location);
        $('#editCameraRtsp').val(camera.rtsp);
        */

        $('#editCameraModal').modal('show');
    });

    // 更新节点
    $('#updateXcmsBtn').click(function () {
        const cameraId = parseInt($('#editCameraId').val());
        const cameraIndex = mXcmsData.findIndex(c => c.id === cameraId);

        if (cameraIndex !== -1) {
            mXcmsData[cameraIndex] = {
                ...mXcmsData[cameraIndex],
                name: $('#editCameraName').val(),
                ip: $('#editCameraIp').val(),
                location: $('#editCameraLocation').val(),
                rtsp: $('#editCameraRtsp').val()
            };

            //f_getXcmsList();
            $('#editCameraModal').modal('hide');
        }
    });

    // 删除节点
    $(document).on('click', '.delete-btn', function () {
        const xcms_name = $(this).data('name');
        if (confirm('确定要删除这个节点吗？')) {
            const index = mXcmsData.findIndex(c => c.xcms_name === xcms_name);
            if (index !== -1) {
                mXcmsData.splice(index, 1);
                f_renderXcmsList(mXcmsData);
            }
        }
    });
    // 查看节点详情
    $(document).on('click', '.view-btn', function () {
        const xcms_name = $(this).data('name');
        const xcms = mXcmsData.find(c => c.xcms_name === xcms_name);

        // 创建并显示详情模态框
        const detailModal = `
        <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">节点-${xcms.xcms_name}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">节点名称</label>
                                    <p class="form-control-plaintext">${xcms.xcms_name}</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">IP地址</label>
                                    <p class="form-control-plaintext">${xcms.xcms_host}</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">操作系统</label>
                                    <p class="form-control-plaintext">${xcms.xcms_systemName}</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">设备名称</label>
                                    <p class="form-control-plaintext">${xcms.xcms_machineNode}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">实时画面</div>
                                    <div class="card-body text-center">
                                        <img src="/static/images/player_poster.jpg"
                                             class="img-fluid rounded"
                                             alt="${xcms.xcms_name}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    `;

        $('body').append(detailModal);
        $('#detailModal').modal('show');

        // 模态框关闭后移除
        $('#detailModal').on('hidden.bs.modal', function () {
            $(this).remove();
        });
    });


    // 搜索功能
    $('#searchBtn').click(function() {
        const search_name = $('#search_name').val();
        const search_state = $('#search_state').val();

        const filterXcmsData = mXcmsData.filter(xcms => {

            const ret = xcms.xcms_name.toLowerCase().includes(search_name) ||
                        xcms.xcms_describe.toLowerCase().includes(search_name);

            if (search_state === "") {
                return ret;
            } else {
                if (xcms.state === parseInt(search_state)) {
                    return true;
                }
            }
        });

        f_renderXcmsList(filterXcmsData);
    });


    // 系统设置表单提交
    $('#systemSettingsForm').submit(function(e) {
        e.preventDefault();
        alert('系统设置已保存');
    });

    // 自动刷新功能
    let refreshInterval = setInterval(f_updateDashboard, 30000);

    // 清理定时器
    $(window).on('beforeunload', function() {
        clearInterval(refreshInterval);
    });
</script>
</html>